<template>
  <div class="mpPosterSet">
    <div style="width: 40vw">
      <Form
        ref="formRef"
        :colLayout="colLayout"
        :labelWidth="labelWidth"
        v-model:formData="baseInfo"
        :formItems="formItems"
        :formDataRules="formDataRules"
      >
      </Form>
      <div>
        <span style="color: #f00">默认30天有效，没有特殊需求可以不用设置</span>
      </div>
      <div style="width: 40vw; margin-left: 150px">
        <!-- v-hasPermi="['api:mpManage:changePosterConfig']" -->
        <el-button
          @click="submit"
          type="success"
          icon="Top"
          size="small"
          v-hasPermi="['member:mpPosterSet:change']"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  changePosterConfig,
  getPosterConfig,
} from "@/api/mpManage/mpPosterSet";
export default {
  name: "mpmpPosterset",
  data() {
    return {
      colLayout: {
        span: 24,
      },
      info: {},
      baseInfo: {},
      labelWidth: "160px",
      formDataRules: {
        code_mode: [{ required: true, message: "请选择" }],
        expire_seconds: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
      },
      formItems: [
        {
          prop: "code_mode",
          label: "二维码类型",
          placeholder: "二维码类型",
          type: "radio",
          size: "small",
          border: true,
          disabled: false,
          change(value) {
            //radio 改变时触发
            console.log(111, value);
          },
          radioList: [
            {
              label: "长期",
              value: 2,
            },
            {
              label: "有效期",
              value: 1,
              size: "small",
            },
          ],
        },
        {
          prop: "expire_seconds",
          label: "二维码有效期",
          placeholder: "二维码有效期,单位秒",
          type: "input",
        },
      ],
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const { data } = await getPosterConfig();
      if (data) {
        this.baseInfo = data;
      }
    },
    async submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          console.log(this.baseInfo);
          await changePosterConfig(this.baseInfo);
          this.$message.success("修改成功!");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mpPosterSet {
  padding: 30px;
}
</style>
